<!--分类树-->
<template>
  <div id="ContentCategoryTree " class="flex-main">
    <!-- 左侧树展示 -->
    <div class="common-title">
      <h2>内容栏目</h2>
    </div>
    <el-tree
      ref="tree"
      v-loading="treeLoading"
      class="common-el-tree tree-active scrollbar-no-width"
      :data="treeDatas"
      :props="defaultTreeProps"
      node-key="id"
      :default-expand-all="isExpandAll"
      :filter-node-method="onTreeFilter"
      :expand-on-click-node="false"
      :current-node-key="selectedValue"
      @node-click="handleNodeClick">
      <span slot-scope="{ data}" class="custom-tree-node">
        <span class="text">{{ data.name }}</span>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  filters: {
  },
  props: {
    value: {
      type: String,
      required: false,
      default() {
        return ''
      }
    },
    isExpandAll: { type: Boolean, default: false } // 是否展开所有节点
  },
  data() {
    return {
      defaultTreeProps: {
        children: 'children',
        label: 'name'
      },
      currentSelectCategory: {},
      searchValue: '',
      treeDatas: [],
      treeLoading: false,
      selectedValue: ''
    }
  },
  watch: {
    searchValue(val) {
      this.$refs.tree.filter(val)
    },
    selectedValue: function(val) {
      this.$emit('input', val)
    },
    value: function(val) {
      this.selectedValue = val
    }
  },
  mounted() {},
  created() {
    this.loadContentCategoryTree()
  },
  methods: {
    async loadContentCategoryTree() {
      this.treeDatas.length = 0
      this.treeLoading = true
      const response = await this.$store.dispatch('upmsCategoryDictTreeByType', '05')
      this.treeDatas = [{ id: '-1', name: '全部' }, ...response]
      this.treeLoading = false
      this.$nextTick(() => {
        this.handleNodeClick(this.treeDatas[0])
      })
    },
    handleNodeClick(data, node) {
      this.$refs.tree.setCheckedKeys([data.id])
      console.log(data)
      this.selectedValue = data.id === '-1' ? '' : data.id
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(data.id)
        this.$emit('change', {
          id: data.id === '-1' ? '' : data.id,
          name: data.name,
          treeNumber: data.id === '-1' ? '' : data.treeNumber
        })
      })
    },
    /* 节点过滤函数 */
    onTreeFilter(value, data) {
      if (!value) return true
      return data[this.defaultTreeProps.filter] ? data[this.defaultTreeProps.label].indexOf(value) !== -1 || data[this.defaultTreeProps.filter].indexOf(value.toUpperCase()) !== -1 : data[this.defaultTreeProps.label].indexOf(value) !== -1
    }
  }
}
</script>
  <style rel="stylesheet/scss" lang="scss" >

  </style>

